<template>
  <div class="box section clearfix">
    <el-form :inline="true" label-position="right" label-width="90px" style="text-align: left" ref="query"
             :model="query">
      <el-row class="query">
        <el-col :span="24">
          <el-form-item label="地区：" prop="region">
            <el-input
              placeholder="请输入"
              v-model="query.region"
              @input="$forceUpdate()"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-form-item label="区/县：" prop="district">
          <el-input
            placeholder="请输入"
            v-model="query.district"
            @input="$forceUpdate()"
          ></el-input>
        </el-form-item>
        <el-form-item label="小区名称：" prop="cellName">
          <el-input
            placeholder="请输入"
            v-model="query.cellName"
            @input="$forceUpdate()"
          ></el-input>
        </el-form-item>
        <el-form-item label="小区期数：" prop="cellPeriod">
          <el-input
            placeholder="请输入"
            v-model="query.cellPeriod"
            @input="$forceUpdate()"
          ></el-input>
        </el-form-item>
        <el-form-item label="座栋位置："  prop="location">
          <el-input
            placeholder="请输入"
            v-model="query.location"
            @input="$forceUpdate()"
          ></el-input>
        </el-form-item>
        <el-form-item class="btn">
          <el-button type="danger" @click="clearFun" v-no-more-click
          >清空
          </el-button
          >
          <el-button type="primary" @click="queryFun" v-no-more-click
          >搜索
          </el-button
          >
        </el-form-item>
        <el-col :span="24">
          <el-form-item>
            <el-button
              size="small"
              type="primary"
              @click="PersonnelDia=true"
              style="background-color: #28B779;border-color: #28B779"
              v-no-more-click
            >添加数据
            </el-button
            >

          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      :data="tableData"
      border
      stripe
      style="width: 100%; "
    >
      <el-table-column
        prop="orderNumber"
        label="订单号"
        align="center"
        width="80px"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="region"
        label="地区"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="district"
        label="区/县"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="cellName"
        label="小区名称"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="cellPeriod"
        label="小区期数"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="location"
        label="座栋位置"
        align="left"
        width="400px"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="houseType"
        label="房屋类型"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="area"
        label="建筑面积"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="renovation"
        label="装修情况"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="univalent"
        label="楼盘单价"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="createTime"
        label="创建时间"
        align="center"
        :show-overflow-tooltip="true"
      />

      <el-table-column fixed="right" label="操作" width="200" align="center">
        <template slot-scope="{row}">
          <el-button
            type="text"
            size="small"
            @click="detailsFun(row)"
            style="color: #3B9DF8"
            v-no-more-click
          >修改
          </el-button
          >

        </template>
      </el-table-column>
    </el-table>
    <!--分页控件-->
    <div class="pagination">
      <span class="title">小计：共{{ this.total }}条数据</span>
      <el-pagination
        background
        layout="total,prev, pager, next, sizes"
        :total="total"
        :page-size="query.pageSize"
        :current-page.sync="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>
    <el-dialog
      title="添加数据："
      :visible.sync="PersonnelDia"
      append-to-body
      width="50%"
      top="30px"
      @close="cancel"
    >
      <el-row>
        <el-form :inline="true" style="text-align: left" label-width="120px">
          <el-col :span="12" class="indexClass">
            <!--            <span class="indexBox">*</span>-->
            <el-form-item label="地区：">
              <el-input v-model="addForm.region"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="区/县：">
              <el-input
                v-model="addForm.district"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="小区名称：">
              <el-input
                v-model="addForm.cellName"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="小区期数：">
              <el-input
                v-model="addForm.cellPeriod"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="座栋位置：">
              <el-input
                v-model="addForm.location"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="房屋类型：">
              <el-input
                v-model="addForm.houseType"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="建筑面积：">
              <el-input
                v-model="addForm.area"
              ></el-input>
              <span class="indexBox">m²</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="楼盘单价：">
              <el-input
                v-model="addForm.univalent"
              ></el-input>
              <span class="indexBox">元/平</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="装修情况：">
              <el-input
                v-model="addForm.renovation"
              ></el-input>
<!--              <span class="indexBox">元/平</span>-->
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dbfqForm">确 定</el-button>
      </span>

    </el-dialog>
  </div>
</template>

<script>
import {
  homeAppraisalAdd,
  homeAppraisalUpdate,
  pagingQuery,
} from "../../../src/assets/js/api";
import { checkPermiss } from "../../assets/js/utlis";

export default {
  name: "evaluationList",
  data() {
    return {
      query: {
        pageSize: 10,
        pageNum: 1,
        region: "", //地区
        district: "", //曲线
        cellName: "",//小区名
        cellPeriod: "",//小区期数
        location: ""//座栋位置
      },
      tableData: [],
      total: 10,
      pages: 0,
      currentPage: 1,
      PersonnelDia: false,
      addForm: {}, //添加数据data
    };
  },
  created() {
    this.query.execMonth = this.$route.query.execMonth || "";
    this.getList();
    this.golbalPermissions = localStorage.getItem("permissions").split(",");
  },
  computed: {
    userInfoExport: function() {
      return checkPermiss("business:sign:exportPerson", this.golbalPermissions);
    }
  },
  methods: {

    //添加数据提交更新或者编辑
    dbfqForm() {
      console.log(this.addForm);
      if (this.addForm.id) {
        //编辑
        homeAppraisalUpdate(this.addForm).then(() => {
          this.$message.success("修改成功");
          this.cancel();
          this.getList();
        });
      } else {
        //跟新
        homeAppraisalAdd(this.addForm).then(() => {
          this.$message.success("提交成功");
          this.cancel();
          this.getList();
        });
      }

    },

    //添加/编辑关闭弹层
    cancel() {
      this.PersonnelDia = false;
      this.addForm = {};
    },

    //   获取数据
    getList() {
      pagingQuery(this.query).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.records;
          this.currentPage = res.data.current;
          this.total = res.data.total;
          this.pages = res.data.pages;
        }
      });

    },
    // 编辑
    detailsFun(row) {
      this.PersonnelDia = true;
      this.addForm = { ...row };
    },

    //   清空按钮
    clearFun() {
      this.$refs["query"].resetFields();
      this.query={};
      this.getList();
    },

    // 搜索按钮
    queryFun() {
      this.query.pageNum = 1;
      this.getList();
    },
    //分页
    handleCurrentChange(cpage) {
      this.query.pageNum = cpage;
      this.getList();
    },
    handleSizeChange(psize) {
      this.query.pageSize = psize;
      this.getList();
    },


  }
};
</script>

<style scoped type="less">
::v-deep .el-table td {
  padding: 10px 0;
}

::v-deep .el-table th {
  padding: 10px 0;
  background-color: #3B9DF8;
  border-color: #3B9DF8;
}

.query ::v-deep .el-input__inner {
  height: 32px;
}

.query ::v-deep .el-input__icon {
  line-height: 32px;
}

.query ::v-deep .el-form-item {
  width: 320px;
}

.query ::v-deep .vue-treeselect__control {
  line-height: 30px;
  height: 32px;
}

.query ::v-deep .vue-treeselect__single-value,
.query ::v-deep .vue-treeselect__placeholder {
  line-height: 30px;
}

::v-deep .btn .el-button {
  line-height: 0;
  width: 80px;
  height: 32px;
}

::v-deep .el-table th > .cell {
  font-size: 14px;
  font-weight: bold;
  color: #fff;
}

::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: rgba(59, 157, 248, 0.1);
}

.box {
  position: relative;
  padding: 20px 20px 50px 20px;
  background: #fff;
}

::v-deep .el-pagination {
  position: absolute;
  right: 0;
  margin-top: 20px;
}

::v-deep .el-pagination__total {
  visibility: hidden;
}

.title {
  font-family: Microsoft YaHei;
  font-size: 12px;
  font-weight: 400;
  line-height: 21px;
  position: absolute;
  left: 0;
  margin-top: 15px;
  color: rgba(51, 51, 51, 1);
}

/deep/ .indexClass {
  position: relative;
}

.indexBox {
  position: absolute;
  top: 10px;
  right: -20%;
  /*font-size: 18px;*/
  /*color: red;*/
}
::v-deep .el-dialog__footer{
  text-align: center;
}

</style>
